<template>
    <div>
        <Card>
            <p slot="title">
                权限列表
            </p>
            <span slot="extra">
                <Button
                    type="error"
                    @click="deleteAll"
                >删除权限</Button>
                <Button
                    type="primary"
                    @click="addBtn"
                >添加权限</Button>
            </span>
            <Row class="functionWrapper">
                <div class="searchWrapper clearfix">
                    <div class="poptip">
                        <Poptip
                            trigger="hover"
                            content="标题搜索"
                            placement="bottom-start"
                        >
                            <Input
                                placeholder="标题搜索"
                                clearable
                                v-model="filterSearch.title"
                            />
                            </Input>
                        </Poptip>
                    </div>
                    <div class="btns">
                        <Button
                            type="info"
                            size="small"
                            @click="getList"
                        >搜索</Button>
                    </div>
                </div>
            </Row>
            <Row>
                <Table
                    :columns="columns"
                    :data="template_list"
                    :loading="listLoading"
                    @on-selection-change="selected"
                    border
                >
                </Table>
            </Row>
            <Row class="pageWrapper">
                <Page
                    :total="page.total"
                    :page-size="page.size"
                    class="buttomPage"
                    @on-change="changePage"
                    :current="page.current"
                    show-elevator
                ></Page>
            </Row>
            <Modal
                v-model="ifModify"
                title="编辑/添加权限"
                @on-ok="addOrEdit(form, rules)"
            >
                <Form
                    :model="form"
                    :label-width="80"
                >
                    <FormItem label="标题:">
                        <Input
                            v-model="form.title"
                            placeholder="标题..."
                        ></Input>
                    </FormItem>
                    <FormItem label="标识:">
                        <Input
                            v-model="form.name"
                            placeholder="标识..."
                        ></Input>
                    </FormItem>
                    <FormItem label="排序:">
                        <Input
                            v-model="form.sort"
                            placeholder="排序..."
                        ></Input>
                    </FormItem>
                    <FormItem label="上级权限">
                        <treeselect
                            ref="treeselect"
                            v-model="form.pid"
                            placeholder="选择上级节点..."
                            :multiple="false"
                            :disable-branch-nodes="false"
                            :options="selectArr"
                        />
                    </FormItem>
                </Form>
            </Modal>
        </Card>
    </div>
</template>
<script>
import common from '@/libs/common.js'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
    mixins: [common],
    components: { Treeselect },
    data() {
        return {
            preUrl: 'rbac/node',
            // 搜索
            filterSearch: {
                title: ''
            },
            form: {
                title: '',
                name: '',
                sort: 60,
                pid: 0,
                id: 0
            },
            columns: [{
                    type: 'selection',
                    width: 60
                },
                {
                    title: '标题',
                    key: 'title'
                },
                {
                    title: '标识',
                    key: 'name'
                }, {
                    title: '排序',
                    key: 'sort',
                    width: 80
                },
                {
                    title: '父级ID',
                    key: 'pid',
                    width: 80
                },

                {
                    title: '操作',
                    key: 'action',
                    width: 150,
                    align: 'center',
                    render: (h, obj) => {
                        return h('Button', {
                            props: {
                                type: 'info',
                                size: 'small',
                            },
                            on: {
                                click: () => {
                                    this.modifyBtn(obj.row)
                                }
                            }
                        }, '修改');
                    }
                }
            ],

            // 下拉选项
            selectArr: []

        }
    },
    methods: {
        dfs(data) {
            let temporary = []
            for (let i in data) {
                let temp = {
                    id: data[i].id,
                    label: data[i].title
                }
                if (data[i].subMenu.length > 0) {
                    temp.children = this.dfs(data[i].subMenu)
                }
                temporary.push(temp)
            }
            return temporary
        },
        getOptions() {
            let url = 'rbac/node/options'
            this.$ajax.post(url)
                .then(res => {
                    if (!res.error_code) {
                        let root = [{
                            id: 0,
                            title: '顶级',
                            subMenu: []
                        }]
                        root[0].subMenu = res.data
                        this.selectArr = this.dfs(root)
                    }

                }).catch(err => console.log(err))
        },
        addBtn() {
            this.form = {
                title: '',
                name: '',
                sort: 60,
                pid: 0,
                id: 0
            }
            this.ifModify = true

        },
        modifyBtn(row) {
            let pid = row.pid.toString()
            if (pid != '0') {
                pid = parseInt(pid)
            }
            this.form = {
                title: row.title,
                name: row.name,
                sort: row.sort,
                pid: pid,
                id: row.id
            }
            this.ifModify = true
        },
        rules() {
            // 检测标识
            if (this.form.name.trim() == '') {
                this.$Message.warning('请填写标识')
                return false
            }

            // 检测标题
            if (this.form.title.trim() == '') {
                this.$Message.warning('请填写标题')
                return false
            }

            return true
        },

    },
    mounted() {
        // 获取参数
        this.getOptions()
    },
}
</script>
<style
    lang="less"
    scoped
>
</style>